<!DOCTYPE html>
<html><head>
<style>
    .first {
        transform: translateZ(10px);
        background-color: blue;
        top: 60px;
    }
    .second {
        transform: translateZ(5px);
        background-color: green;
        top: 40px;
    }
    .third {
        transform: translateZ(-5px);
        background-color: yellow;
        top: 20px;
    }
    .fourth {
        transform: translateZ(-10px);
        background-color: red;
    }
    .preserve {
        transform-style: preserve-3d;
    }
    .leaf {
        width: 100px;
        height: 100px;
        position:absolute;
    }
</style>
</head><body>

<div class="preserve">
    <div class="leaf first"></div>
    <div class="preserve" style="opacity:0.5">
        <div class="leaf second"></div>
        <div class="leaf fourth"></div>
    </div>
    <div class="leaf third"></div>
</div>

</body>
</html>

